<%@ include file="/WEB-INF/jsp/include.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="/spring"%>
<html>
<head>

	<style type="text/css">
	body{
		font-size:0.8em;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	table thead td{
		font-weight:bold;
		cursor:pointer;
	}
	/* If you wish to highlight current sortable column, add layout effects below */
	.highlightedColumn{

	}	
	</style>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/animatedcollapse.js"></script>
<script type="text/javascript" src="js/sortabletable.js"></script>

<script type="text/javascript">

function confirmWin(confirmType,rowid,rowname) {
 	var response = confirm("Do you Want to " + confirmType + " this user : " +rowname +" ?");

	if (response) {
		//window.location.href ="google.com";
		document.frmMain.action_type.value = "action_"+confirmType;
		document.frmMain.item_id.value     = rowid;
		document.frmMain.submit();
		return true;
	}else
	{
         //do nothing.
	}
}
</script>



<title><fmt:message key="msg.bp.page.add.title" /></title>
</head>
<body>
<center>
	<form:form method="post" commandName="bpDetailsList" name="frmMain">
		 <input type="hidden" name="action_type" value="">
		 <input type="hidden" name="item_id" value="">
	            
		  <!--  initialize table for animated table divs -->
			<script type="text/javascript">
				<c:forEach items="${bpDetailsList}" var="bpDetails">
					animatedcollapse.addDiv('div_${bpDetails.bp_id}', 'fade=0,speed=400,group=pets,hide=1')
				</c:forEach>

				animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
				}
       			animatedcollapse.init();
   			</script>

		<table width="80%">
			<tr>
				<td align="center" bgcolor="lightblue">Edit Business Partners</td>
			</tr>
			<tr>
				<td>
					<table width ="100%" id="myTable">
						<!-- id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...)	-->
						<thead>
							<tr>
								<td>Name <img alt="Click to sort" src="images/icon_sortSmall.gif"></td>
								<td>Address <img alt="Click to sort" src="images/icon_sortSmall.gif"></td>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${bpDetailsList}" var="bpDetails">
								<tr>
									<td>
										${bpDetails.bp_fname} ${bpDetails.bp_mname}  ${bpDetails.bp_lname}
										<a href="#" rel="toggle[div_${bpDetails.bp_id}]" data-openimage="images/icon_collapse.gif" data-closedimage="images/icon_expand.gif">
										<img src="images/icon_collapse.gif" border="0" /></a> 
									</td>
									<td>
										<a href="#" onclick="javascript: confirmWin('modify','${bpDetails.bp_id}','${bpDetails.bp_fname}');"><img src="images/icon_app-edit.png" title="modify" alt="modify" border="0" /></a>
    	   					            <a href="#" onclick="javascript: confirmWin('delete','${bpDetails.bp_id}','${bpDetails.bp_fname}');"><img src="images/icon_app-del.png" title="delete" alt="delete" border="0" /></a>
								    </td>
								</tr>
								<tr>
								   	<td colspan =2>
										<div id="div_${bpDetails.bp_id}" style="">
										 	<fieldset>
										 		<legend> Personal Details</legend>
										 		First <input type="text" value="${bpDetails.bp_fname}" name="${bpDetails.bp_id}_bp_fname">	</input> 
 												Middle<input type="text" value="${bpDetails.bp_mname}" name="${bpDetails.bp_id}_bp_mname">	</input>
	 											Last  <input type="text" value="${bpDetails.bp_lname}" name="${bpDetails.bp_id}_bp_lname">	</input>

										 	</fieldset>
											<fieldset>
										 		<legend> Address </legend>
												     ID          <input type="text" value="${bpDetails.bp_address.address_Id}" name="${bpDetails.bp_id}_address_Id" readonly="readonly">	</input>
												<br> Line1       <input type="text"  size ="50"  value="${bpDetails.bp_address.addr1}" 		name="${bpDetails.bp_id}_addr1">	</input>
												<br> Line2       <input type="text"  size ="50"  value="${bpDetails.bp_address.addr2}" 		name="${bpDetails.bp_id}_addr2">	</input>
												<br> City        <input type="text" value="${bpDetails.bp_address.city}" 		name="${bpDetails.bp_id}_city">		</input>
													 State       <input type="text" value="${bpDetails.bp_address.state}" 		name="${bpDetails.bp_id}_state">	</input>
													 Country		<input type="text"  value="${bpDetails.bp_address.country}" 	name="${bpDetails.bp_id}_country">	</input>										 		
										 	</fieldset>
										</div>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<script type="text/javascript">
					//initSortTable('myTable',Array('S','S'));
					</script>
				</td>
			</tr>
		</table>
	</form:form>
</center>

</body>
</html>